<template>
	<view class="login">
		<input type="text" v-model="username" placeholder="请输入用户名" />
		<input type="text" v-model="password" placeholder="请输入密码" />
		<view class="item">
			<checkbox :checked="checked" @click="checked =! checked"/><text>开放者协议</text>
		</view>

		<button type="primary" @click="handleLogin">登录</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const username = ref('')
	const password = ref('')
	const checked = ref(false)
	const handleLogin = () => {
		const data = {
			username: username.value,
			password: password.value
		}
		console.log(checked.value)
		// 1. 用户名和密码 不可以为空
		if (!data.username || !data.password) {
			uni.showToast({
				title: '用户名或密码不可以为空',
				icon: 'error'
			})
			return;
		}
		// 2， 必须同意协议
		if (!checked.value) {
			uni.showModal({
				title: '提示',
				content: '点击确定代表同意开放者协议',
				success: result => {
					if(result.confirm) {
						// 点击了确定
						checked.value = true
					}
				}
			})
			return ;
		}
		// 3. 发送请求
		uni.request({
			url: 'http://124.221.74.149:3000/login',
			method: 'post',
			data
		}).then(resp => {
			// 存储信息
			uni.setStorageSync('userInfo', resp.data.data.userInfo)
			uni.setStorageSync('accessToken', resp.data.data.accessToken)
			uni.setStorageSync('refreshToken', resp.data.data.refreshToken)
			// 跳转页面
			uni.switchTab({
				url: '/pages/user/user'
			})
		})
	}
</script>

<style lang="scss">
	.login {
		padding: 10rpx;

		input {
			height: 80rpx;
			border: 1px solid #ccc;
			margin: 20rpx 0;
		}

		.item {
			height: 80rpx;
			margin: 20rpx 0;
			line-height: 80rpx;
		}
	}
</style>